<template>
  <el-form label-width="100px">
    <el-form-item label="标签">
      <el-input :model-value="modelValue.label" @update:model-value="updateProp('label', $event)" />
    </el-form-item>
    <el-form-item label="占位文本">
      <el-input :model-value="modelValue.placeholder" @update:model-value="updateProp('placeholder', $event)" />
    </el-form-item>
    <el-form-item label="输入类型">
      <el-select :model-value="modelValue.type" @update:model-value="updateProp('type', $event)" class="w-full">
        <el-option label="文本" value="text" />
        <el-option label="数字" value="number" />
        <el-option label="密码" value="password" />
        <el-option label="电话" value="tel" />
      </el-select>
    </el-form-item>
    <el-form-item label="最大长度">
      <el-input-number :model-value="modelValue.maxlength" @update:model-value="updateProp('maxlength', $event)" :min="1" />
    </el-form-item>
    <el-form-item>
      <el-checkbox :model-value="modelValue.required" @update:model-value="updateProp('required', $event)">必填</el-checkbox>
    </el-form-item>
  </el-form>
</template>

<script setup lang="ts">
import { InputProps } from './types'

const props = defineProps<{
  modelValue: InputProps
}>()

const emit = defineEmits(['update:modelValue'])

const updateProp = (key: keyof InputProps, value: any) => {
  emit('update:modelValue', {
    ...props.modelValue,
    [key]: value
  })
}
</script> 